<template>
	<view class="box">
		<view class="bg">
			<image src="../../static/image/loginbg.png" />
		</view>
		<view class="login-box">
			<u--form labelPosition="left" :model="corporationsData" :rules="rules" ref="corporationsData"
				labelAlign="right" labelWidth="0">
				<u-form-item prop="mobile">
					<view style="background: #F3F5F6;border-radius: 12rpx;">
						<!-- <u--input v-model="corporationsData.name" placeholder="企业名称"></u--input> -->
						<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
						<!-- #ifndef APP-NVUE -->
						<u-input placeholder="请输入手机号" v-model="corporationsData.mobile" :maxlength="11">
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input placeholder="请输入手机号" v-model="corporationsData.mobile" :maxlength="11">
							<!-- #endif -->
								<!-- <u--text text="http://" slot="prefix" margin="0 3px 0 0" type="tips"></u--text> -->
								<image style="width:48rpx;height:48rpx" src="../../static/image/user.png" slot="prefix">
								</image>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
				</u-form-item>

				<u-form-item prop="password">
					<view style="background: #F3F5F6;border-radius: 12rpx;">
						<!-- <u--input v-model="corporationsData.sex" placeholder="法定代表人"></u--input> -->
						<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
						<!-- #ifndef APP-NVUE -->
						<u-input placeholder="请输入密码" v-model="corporationsData.password" type="password">
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input placeholder="请输入密码" v-model="corporationsData.password" type="password">
							<!-- #endif -->
								<!-- <u--text text="http://" slot="prefix" margin="0 3px 0 0" type="tips"></u--text> -->
								<image style="width:48rpx;height:48rpx" src="../../static/image/pas.png" slot="prefix">
								</image>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
				</u-form-item>
			</u--form>
			<view class="zhmm">
				<label @click="retrievePassword">找回密码</label>
			</view>
		</view>
		<view class="dl-button" @click="wxLogin">登录</view>
		<view class="zc-button" @click="enroll">注册</view>
		<!-- <tito title="登录" />
		<view class="image-text">
			<image class="image" src="../../static/log.png" mode=""></image>
			<view class="text">
				康乐宏道净水器
			</view>
		</view>
		<view class="login" @click="wxLogin">
			微信登录
		</view> -->
	</view>
</template>

<script>
	import tito from "@/components/tito/tito.vue"
	export default {
		components: {
			tito
		},
		data() {
			return {
				openId: "",
				unionid: "",
				// corporationsData: {
				// 	name: "",
				// 	enterpriseLegalPerson: "",
				// },
				corporationsData: {
					mobile: "",
					password: "",
				},
				rules: {
					'mobile': {
						type: 'string',
						required: true,
						message: '手机号不能为空',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '密码不能为空',
						trigger: ['blur', 'change']
					},
				},
				userId: "", //推荐人ID
			};
		},
		onLoad(ope) {
			if (ope.userId) {
				this.userId = ope.userId
			}
		},
		onShow() {
			if (uni.getStorageSync("token")) {
				uni.reLaunch({
					url: "/pages/home/home"
				})
			}
		},
		methods: {
			enroll() {
				this.$u.route({
					url: "/subpackageA/pages/my/enrollment/enrollment?userId=" + this.userId
				})
			},
			retrievePassword() {
				this.$u.route({
					url: "/subpackageA/pages/my/retrievePassword/retrievePassword",
				})
			},
			submit() {
				this.$refs["corporationsData"].validate().then(res => {
					this.loading = true;
					this.$request.post("/customer/login/accountLogin", this.corporationsData).then(res => {
						if (res.code == 0) {
							uni.setStorageSync("token", res.data.token)
							uni.setStorageSync("userData", res.data)
							uni.$u.toast("登录成功")
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/home/home"
								})
							}, 1000);
						} else {
							uni.$u.toast(res.msg)
						}

					})
					// approve({ openId: this.openId, ...this.corporationsData, type: this.userState }).then((res) => {
					// 	if (res.code == 0) {
					// 		uni.$u.toast('提交成功')
					// 		this.getAccreditation()
					// 	} else {
					// 		uni.$u.toast('提交失败')
					// 	}
					// 	this.loading = false;
					// })
				}).catch(errors => {
					this.loading = false;
					uni.$u.toast('校验失败')
				})
			},
			//通过code获取openID
			async codeOpenID(code) {
				let res = await this.$request.post("/water-platform-app-api/customer/login/getOpenid", {
					code: code
				})
				return res.data
			},
			async login(e) {
				let data = {
					unionId: e.unionId,
					miniOpenId: e.openid
				}
				await this.$request.get("/water-platform-app-api/customer/login/miniRegisterV1", data,
					"application/json").then(res => {
					if (res.code == 0) {
						console.log(res.data);
						uni.setStorageSync("user", res.data)
						uni.setStorageSync("token", res.data.token)
						uni.reLaunch({
							url: "/pages/home/home"
						})
					}
				})
			},
			async wxLogin() {
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (~res.provider.indexOf('weixin')) { //支持微信、qq和微博等
							uni.login({
								provider: 'weixin',
								success: async (loginRes) => {
									console.log(loginRes, "获取code");
									let openId = await this.codeOpenID(loginRes.code)
									console.log(openId, "获取openIdopenIdopenId");
									uni.setStorageSync("openId", openId)
									// this.login(openId)
									this.submit()
								},
								fail(res) {
									console.info(res)
									if (res.errMsg.includes('客户端未安装')) {
										uni.showToast({
											title: '请先安装微信客户端',
											duration: 2000,
											icon: "none"
										});
									} else if (res.errMsg.includes('用户取消')) {
										uni.showToast({
											title: '用户取消授权登录',
											duration: 2000,
											icon: "none"
										});
									} else if (res.errMsg.includes('Authentication failed')) {
										uni.showToast({
											title: '用户拒绝授权登录',
											duration: 2000,
											icon: "none"
										});
									} else {
										uni.showToast({
											title: res.errMsg,
											duration: 2000,
											icon: "none"
										});
									}
								}
							});
						}
					},
					fail(res) {
						console.info(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.box {
		background-color: #fff;

		.bg {
			image {
				width: 100%;
			}
		}

		.login-box {
			padding: 0 94rpx;
			box-sizing: border-box;
			margin-top: 128rpx;
			margin-bottom: 64rpx;

			.zhmm {
				text-align: end;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #14171A;
				line-height: 33rpx;
			}
		}

		.dl-button {
			margin: 0 94rpx;
			background: #2590FA;
			border-radius: 100rpx;
			color: #fff;
			padding: 22rpx 0;
			box-sizing: border-box;
			text-align: center;
			margin-bottom: 32rpx;
		}

		.zc-button {
			margin: 0 94rpx;
			border: 1px solid #2590FA;
			color: #2590FA;
			border-radius: 100rpx;
			padding: 22rpx 0;
			box-sizing: border-box;
			text-align: center;
		}

		//=======
		.image-text {
			text-align: center;
			margin-top: 244rpx;

			.image {
				width: 240rpx;
				height: 240rpx;
				border-radius: 50%;
			}

			.text {
				font-size: 32rpx;
				color: #14171A;
				font-weight: 700;
				margin-top: 36rpx;
			}
		}

		.login {
			width: 548rpx;
			height: 92rpx;
			background: #2590FA;
			border-radius: 100rpx 100rpx 100rpx 100rpx;
			margin: 0 auto;
			text-align: center;
			color: #FFF;
			line-height: 92rpx;
			font-size: 28rpx;
			margin-top: 64rpx;
		}
	}
</style>